---
id: 5ef9b03c81a63668521804de
title: Hatua ya 48
challengeType: 0
dashedName: step-48
---

# --description--

Fahamu kwamba vitufe vyote viwili vya redio vinaweza kuchaguliwa kwa wakati mmoja. Ili kufanya hivyo, kuchagua kitufe kimoja cha redio kutaondoa kiotomatiki kingine, vitufe vyote viwili lazima viwe na sifa ya `name` yenye thamani sawa.

Here is an example of two radio buttons with the same `name` attribute:

```html
<input type="radio" name="meal"> Breakfast
<input type="radio" name="meal"> Lunch
```

Ongeza sifa ya `name` yenye thamani `indoor-outdoor` kwa vitufe vyote viwili vya redio.

# --hints--

Vitufe vyote viwili vya redio bado vinapaswa kupatikana kati ya tagi za kufungua na kufunga za vipengee vya `label`.

```js
const labelChildNodes = [...document.querySelectorAll('form > label')].map(
  (node) => node.childNodes
);
assert(
  labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT')
    .length === 2
);
```

Vitufe vyako vyote vya redio vinapaswa kuwa na sifa ya `name`. Hakikisha kuwa kuna nafasi baada ya jina la tagi inayofungua na/au kuna nafasi kabla ya majina yote ya sifa.

```js
const radioButtons = [...document.querySelectorAll('input[type="radio"]')];
assert(radioButtons.every((btn) => btn.hasAttribute('name')));
```

Vitufe vyako vyote vya redio vinapaswa kuwa na sifa ya `type`. Hakikisha kuwa kuna nafasi baada ya jina la tagi inayofungua na/au kuna nafasi kabla ya majina yote ya sifa.

```js
const radioButtons = [...document.querySelectorAll('input')];
assert(radioButtons.every((btn) => btn.hasAttribute('type')));
```

Vitufe vyote viwili vya redio vinapaswa kuwa na sifa ya `name` yenye thamani `indoor-outdoor`. Aidha umesahau maandishi, au kuna makosa ya maandishi. Kumbuka kwamba thamani za sifa zinapaswa kuzungukwa na alama za nukuu.

```js
const radioButtons = [...$('input[type="radio"]')];
assert(
  radioButtons.every((btn) =>
    btn.getAttribute('name').match(/^indoor-outdoor$/)
  )
);
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
--fcc-editable-region--
          <label><input id="indoor" type="radio"> Indoor</label>
          <label><input id="outdoor" type="radio"> Outdoor</label>
--fcc-editable-region--
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>
```

